import React from 'react';
import styles from './index.css';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import withRouter from 'umi/withRouter';

const transition: any = withRouter(
  (props) => {
    const transition: any = (
      <TransitionGroup>
        <CSSTransition key={location.pathname} classNames="fade" timeout={2000}>
          {props.children}
        </CSSTransition>
      </TransitionGroup>
    )
    return props.location.pathname === '/' || props.location.query && props.location.query.from === 'index' ?
      (
        <div className={styles.normal}>
          <h1 className={styles.title}>Yay! Welcome to umi!</h1>
          {transition}
        </div>
      ) :
      (
        <div>
          {transition}
        </div>
      )
  }
)

export default transition;
